<template>
  <div class="home">
    <div class="my">
      <img :src="require('@/assets/logo.png')" />
      <div>
        <span>123</span>
      </div>
    </div>
    <!-- <van-grid icon-size="30px" :column-num="3">
      <van-grid-item
        v-for="(value, i) in 5"
        :key="value"
        :icon="require('@/assets/logo.png')"
        :text="['信息上报', '信息列表', '小区管理', '用户意向', '我的信息'][i]"
        @click="item(i)"
      />
    </van-grid> -->
    <div style="padding:10px">
      <div id="grid">
        <div
          @click="item(i)"
          class="grid-item"
          v-for="(a, i) in [
            '信息上报',
            '信息列表',
            '小区管理',
            '用户意向',
            '我的信息',
          ]"
          :key="a"
        >
          <div class="gitem">
            <img src="../assets/img.png" />
            <div>{{ a }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {};
  },
  methods: {
    item(index) {
      let name = [
        "InformationReporting",
        "InformationList",
        "CommunityManagement",
        "UserIntention",
        "PersonalInformation",
      ][index];
      this.$router.push({ name });
    },
  },
};
</script>

<style lang="scss" scoped>
.my {
  text-align: center;
  padding: 1rem;
  img {
    width: 70px;
    height: 70px;
  }
}

#grid {
  width: 100%;
  .grid-item {
    width: 31%;
    float: left;
    display: flex;
    justify-content: space-around;
    .gitem {
      img {
        width: 30px;
      }
      div {
        font-size: 14px;
      }
      padding-top: 15px;
      margin-top: 15px;
      width: 90px;
      height: 75px;
      border: #a6a6ac 1px solid;
      border-radius: 10px;
      text-align: center;
    }
  }
}
</style>
